<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link href="layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="layuiadmin/style/admin.css" media="all" rel="stylesheet">
</head>
<body>
<input autocomplete="off" class="layui-input" id="vendorId" name="vendorId" type="hidden">
<table class="layui-hide" id="unSelectedItem" lay-filter="unSelectedItem"></table>

<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">为客商添加产品</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script src="layuiadmin/layui/layui.js"></script>

<script>
    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#unSelectedItem'
            , url: 'http://localhost:8086/checkUnselectedItem',
            where:
                { //设定异步数据接口的额外参数，比如设置多条件查询的参数
                    vendorId: document.getElementById("vendorId").value
                }
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , title: '用户数据表'
            , cols:
                [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        , {field: 'itemId', width: 80, title: 'ID', sort: true}
                        , {field: 'itemCode', width: 90, title: '存货编码'}
                        , {field: 'itemName', width: 100, title: '存货名称'}
                        , {field: 'itemSpecification', width: 110, title: '规格'}
                        , {field: 'enabledFlag', width: 110, title: '是否启用'}
                        , {field: 'description', title: '备注', width: '30%', minWidth: 100}
                        //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        /*,{field:'bidderName', title: '投标人（单人）', sort: true}
                       ,{field:'bidderPhone', title: '投标人电话', sort: true}
                       ,{field:'registeredArea', title: '注册地区'}
                       ,{field:'remarks', width:137, title: '备注', sort: true}*/
                    ]
                ]
            , done: function (data) {
            }
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(unSelectedItem)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    var $ = layui.$;
                    var idList = [];
                    // layer.alert(JSON.stringify(data));
                    $.each(data, function (index, value) {
                        // ...
                        // alert(JSON.stringify(value));
                        idList.push(value.itemId);
                        console.info(idList);
                    });
                    var idString = idList.toString();
                    $.ajax({
                        url: 'http://localhost:8086/addItem',
                        data: {
                            idString: idString,
                            vendorId: document.getElementById("vendorId").value
                        },
                        type: "post",
                        dataType: "json",
                        async: 'false',
                        success: function (data) {
                            console.log(data);
                            window.parent.location.reload();
                            parent.layer.closeAll();
                        },
                        error: function (data) {
                            $.messager.alert('错误', data.msg);
                        }
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        //监听行工具事件
        table.on('tool(unSelectedItem)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>